<template>
    <div>
        <a-modal
                width="260px"
                :closable="false"
                style="z-index: 9999"
                title="上传图片"
                :visible="showUL">
            正在开发...
            Coming soon...
<!--            <a-upload-dragger-->
<!--                    :fileList="fileList"-->
<!--                    name="file"-->
<!--                    :multiple="false"-->
<!--                    @change="Change()"-->
<!--                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"-->
<!--                    accept="image/png, image/jpeg"-->
<!--            >-->
<!--                <p class="ant-upload-drag-icon">-->
<!--                    <a-icon type="inbox" />-->
<!--                </p>-->
<!--                <p class="ant-upload-text">-->
<!--                    点击或拖拽上传-->
<!--                </p>-->
<!--                <p class="ant-upload-hint">-->
<!--                    支持PNG/JPEG，请使用英文名文件-->
<!--                </p>-->
<!--            </a-upload-dragger>-->
<!--            {{fileList}}-->
            <a-button type="primary" @click="showUL = false" slot="footer">关闭</a-button>
        </a-modal>
        <a-modal
                :dialog-style="{ top: '30px' }"
                :z-index="990"
                title="文章信息"
                v-model="show">
            <template slot="footer">
                <a-button @click="show = false">
                    关闭
                </a-button>
            </template>
            <a-form-model
                    ref="ruleForm"
                    :model="post"
                    :rules="rules">
                <a-form-model-item label="标题" prop="title">
                    <a-input v-model="post.title"/>
                </a-form-model-item>
                <a-row :gutter="20">
                    <a-col :span="16">
                        <a-form-model-item label="描述" prop="des">
                            <a-input v-model="post.des"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8">
                        <a-form-model-item label="标签" prop="tag">
                            <a-input v-model="post.tag"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-form-model-item label="图片" prop="img">
                    <a-row :gutter="10">
                        <a-col :md="18" :span="24">
                            <a-input v-model="post.img" placeholder="http:// or https://"/>
                        </a-col>
                        <a-col :md="6" :span="24">
                             或 <a-button type="primary" @click="showUL = true">上传</a-button>
                        </a-col>
                    </a-row>
                </a-form-model-item>
                <a-card size="small" title="预览" style="width: 74%">
                    <img :src="post.img" width="100%" alt="图片预览">
                </a-card>
                <a-form-model-item>
                    <a-button type="primary" @click="submit('post')">提交</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
        <a-form-model
                ref="ruleForm"
                :model="post"
                :rules="rules">
            <a-form-model-item label="正文" prop="content">
                <mavon-editor
                        v-model="post.text"
                        style="height: 700px; z-index: 1"/>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" @click="show = true">下一步</a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
    export default {
        name: "Post",
        created() {
            let aid = this.$route.query.id;
            let pass = this.$route.query.pass;
            const t = this;
            if (aid!=null){
                if (pass=='true'){
                    axios.get('/atc/preview/'+aid).then(function (resp) {
                        t.post = resp.data;
                    })
                } else {
                    axios.get('/atc/np/getById/'+aid).then(function (resp) {
                        t.post = resp.data;
                    })
                }
            }
        },
        methods:{
            submit() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        let aid = this.$route.query.id;
                        let pass = this.$route.query.pass;
                        const t = this;
                        if (aid!=null){
                            if (pass=='true'){
                                axios.post('/do/update', t.post).then(function (resp) {
                                    if (resp.data){
                                        t.$success({
                                            zIndex: 9900,
                                            content: '文章已提交',
                                            okText: '->文章管理',
                                            onOk() {
                                                t.$router.push('/article')
                                            },
                                        });
                                    } else{
                                        alert('Access denied.你没有权限！')
                                    }
                                })
                            } else {
                                axios.post('/do/updateNP', t.post).then(function (resp) {
                                    if (resp.data){
                                        t.$success({
                                            zIndex: 9900,
                                            content: '文章已提交',
                                            okText: '->文章管理',
                                            onOk() {
                                                t.$router.push('/article')
                                            },
                                        });
                                    } else{
                                        alert('Access denied.你没有权限！')
                                    }
                                })
                            }

                        } else {
                            axios.post('/do/post', t.post).then(function (resp) {
                                t.$success({
                                    zIndex: 9900,
                                    content: '文章已提交，等待审核',
                                    okText: '->文章管理',
                                    onOk() {
                                        t.$router.push('/article')
                                    },
                                });
                            })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        data() {
            return {
                fileList: [],
                show: false,
                showUL: false,
                post: {
                    title: '',
                    des: '',
                    text: '',
                    tag: '',
                    img: ''
                },
                rules: {
                    title: [
                        {required: true, message: '请输入标题', trigger: 'blur'},
                    ],
                    des: [
                        {required: true, message: '请输入描述', trigger: 'blur'},
                    ],
                    text: [
                        {required: true, message: '请输入正文', trigger: 'blur'},
                    ],
                    tag: [
                        {required: true, message: '请输入标签', trigger: 'blur'},
                    ],
                    img: [
                        {required: true, message: '请输入图片链接', trigger: 'blur'},
                    ],
                }
            }
        }
    }
</script>

<style scoped>

</style>